<style>
    .required-tip{
        display: inline-block;
        color:#f00505;
        margin-left: 5px;
        font-size: 20px;
        padding-top: 5px;
    }
</style>

<blockquote class="layui-elem-quote">
  新增文章分类
</blockquote>

<div style="padding:20px">
    <form class="layui-form" action="">
        
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">分类图标</label>
              <div class="layui-input-inline layui-input-wrap">
                <img src="/static/images/upload.png" id="imgurl" width="160" height="160" />
                <input type="hidden" id="cover" name="imgurl" />
              </div>

              <div class="layui-form-mid" style="padding: 0!important;"> 
                <button type="button" class="layui-btn layui-btn-primary" id="ID-upload-demo-btn" >上传图片</button>
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
            <input type="text" name="category_name" lay-verify="required" placeholder="分类名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分类排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="0" placeholder="请输入数字，数字越大越靠前" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
              <input type="text" name="alias" value="" placeholder="分类别名，模板名称" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">启用模板</label>
          <div class="layui-input-block">
            <input type="radio" name="tempstatus" value="1" title="是">
            <input type="radio" name="tempstatus" value="0" title="否" checked>
          </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
              <input type="radio" name="isshow" value="1" title="显示">
              <input type="radio" name="isshow" value="0" title="隐藏" checked>
            </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">SEO标题</label>
          <div class="layui-input-block">
          <input type="text" name="seo_title"  placeholder="分类SEO标题" autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">keywords</label>
            <div class="layui-input-block">
            <textarea placeholder="关键词" class="layui-textarea" name="keywords"></textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">description</label>
            <div class="layui-input-block">
              <textarea placeholder="分类描述" class="layui-textarea" name="descriptions"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
              <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>

layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var util = layui.util;
  
  // 提交事件
  form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值

    $.post("{:url('web.category/add')}",data.field,function(res){

      if(res.code==1){
        layer.msg(res.msg,function(){
          window.location.href="{:url('web.category/index')}"
        })
      }

    })

    return false; // 阻止默认 form 跳转
  });





  // 单图片上传
  var upload = layui.upload;

  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: '{:url("Upload/index")}', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){},
    done: function(res){
      console.log(res)
        if(res.errno == 0){
          $("#imgurl").attr("src",res.data.url);
          $("#cover").val(res.data.url);
        }else{
          layer.msg('上传失败');
        }
    },
    error: function(){},
    // 进度条
    progress: function(n, elem, e){
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });


});
</script>
 